<template>
  <div class="home">
    <el-card>
      <div class="data-top">
        <div class="data-top-list">
          <span class="iconfont icon-today-order"></span>
          <span>今日订单数</span>
          <p><i>3000</i>单</p>
        </div>
        <div class="data-top-list">
          <span class="iconfont icon-today-money"></span>
          <span>今日销售额</span>
          <p><i>3000</i>元</p>
        </div>
        <div class="data-top-list">
          <span class="iconfont icon-week-order"></span>
          <span>本周订单数</span>
          <p><i>3000</i>单</p>
        </div>
        <div class="data-top-list">
          <span class="iconfont icon-week-money"></span>
          <span>本周销售额</span>
          <p><i>3000</i>元</p>
        </div>
      </div>
      <div class="home-content">
        <!-- 今日畅销品排名前10的商品 -->
        <div class="top-ten-goods" ref="goodsData"></div>
        <!-- 近7天的销售数据 -->
        <div class="week-sales" ref="weekSalesData"></div>
        <!-- 近7天收银员的数据 -->
        <div class="week-emp-sales" ref="weekEmpSalesData"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  methods: {
    loadData() {
      // 1、排名前10的畅销品，的echarts图标
      const goodsDataEchart = this.$echarts.init(this.$refs.goodsData);
      const goodsDataEchartOption = {
        title: {
          text: "排名前10的畅销品",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      goodsDataEchart.setOption(goodsDataEchartOption);
      // 2、近7天的销售数据
      const weekSalesDataEchart = this.$echarts.init(this.$refs.weekSalesData);
      const weekSalesDataEchartOption = {
        title: {
          text: "近7天的销售数据",
          left: "center",
        },
        legend: {
          orient: "vertical",
          left: "right",
        },
        tooltip: {},
        dataset: {
          source: [
            ["product", "2015", "2016", "2017"],
            ["Matcha Latte", 43.3, 85.8, 93.7],
            ["Milk Tea", 83.1, 73.4, 55.1],
            ["Cheese Cocoa", 86.4, 65.2, 82.5],
            ["Walnut Brownie", 72.4, 53.9, 39.1],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      };
      weekSalesDataEchart.setOption(weekSalesDataEchartOption);
      // 3、近7天收银员的数据
      const weekEmpSalesEchart = this.$echarts.init(
        this.$refs.weekEmpSalesData
      );
      const weekEmpSalesEchartOption = {
        title: {
          text: "近7天收银员的数据",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ads",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "Direct",
            type: "line",
            stack: "Total",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "Search Engine",
            type: "line",
            stack: "Total",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      weekEmpSalesEchart.setOption(weekEmpSalesEchartOption);
    },
  },
  mounted() {
    this.loadData();
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  .data-top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .data-top-list {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 15px;
      width: 20%;
      background-color: #fdfcfc;
      border-radius: 10px;
      border: 1px solid #ccc;
      box-shadow: 0px 0px 6px 3px rgba(13, 157, 209, 0.2);
      .iconfont {
        font-size: 60px;
        color: #1296db;
      }
      span {
        margin: 10px 0;
        font-size: 24px;
        color: #d4237a;
      }
      p {
        font-size: 20px;
        i {
          margin-right: 10px;
          font-size: 40px;
          color: #f00;
        }
      }
    }
  }
  .home-content {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    div {
      margin-bottom: 20px;
      padding: 10px;
      height: 400px;
      width: 45%;
      border-radius: 10px;
      border: 1px solid #ccc;
      box-shadow: 0px 0px 6px 3px rgba(13, 157, 209, 0.2);
    }
    .week-emp-sales {
      width: 95%;
    }
  }
}
</style>
